<template>
  <div class="choosetheformat">
	  <header class="header" style="border-bottom: 1px solid #ededed;position: fixed;z-index: 999;">
	      <nav class="container flex-container">
	          <div class="flex-item logo">
	              <div style="line-height: 30px;">
<!--					<img style="height: 44px;display: inline-table;" src="../../assets/img/logo3.png" alt="千兰">-->
					<span class="newLogo-right">商家中心</span>
				  </div>
	          </div>
	          <div class="flex-item">
	              <div>
					<ul class="nav">
					  <li index="1" style="color: #808080;" >联系我们</li>
					  <li index="4" style="color: #808080;" >常见问题</li>
					  <li index="4" style="color: #808080;">服务商入驻</li>
					  <li index="4" style="color: #808080;" @click="logout">注销</li>
					</ul>
				  </div>
	          </div>
	      </nav>
	  </header>

    <div class="container2" style="padding-top: 100px;">
      <el-card class="box-card" style="width: 100%;">
        <div slot="header" class="clearfix">
          <span>门店列表</span>
          <span class="el-icon-refresh" style="cursor: pointer;"></span>
          <el-button @click="addStore()" v-if="this.role !== 1" style="float: right; padding: 3px 0" type="text">新建门店</el-button>
          <el-form style="margin-top: 10px;" :inline="true" class="demo-form-inline">
            <el-form-item label-width="0">
              <el-input  placeholder="名称/联系人/电话/地址"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getDataList">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" v-if="this.role === 1" @click="adminTotal">进入总部</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="dataList.length == 0" style="text-align: center;">
          <i class="el-icon-document" style="font-size: 50px;margin: 28px 0px 18px 0px;"></i>
          <p style="margin-bottom: 18px;">空空如也，<el-button @click="creatStoresHandle" type="text">立即创建</el-button>
          </p>
        </div>
        <el-row>
          <el-col :span="10" v-for="(item,index) in dataList" :key="index" :offset="index % 2 == 0 ? 1 : 2" style="margin-bottom: 20px;">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div style="overflow: hidden;height: 100px;margin: 10px;">
                    <img :src="item.ewmLogo" class="image" v-if="item.ewmLogo">
                    <img src="../../assets/img/no-img1.png" class="image" v-else>
                  </div>
                </el-col>
                <el-col :span="16">
                  <div style="padding: 14px;">
                    <span>{{item.name}}</span>
                    <div class="bottom clearfix">
                      <p class="time">{{ item.address }}</p>
                      <!-- 1待审核,2通过，3拒绝-->
                      <el-button type="text" class="button" v-if="item.status == 2" @click="adminSeller(item)">进入管理</el-button>
                      <el-button type="text" class="button" v-if="item.status == 1" disabled>待审核</el-button>
                      <el-popover v-if="item.status == 3" placement="top" trigger="hover" width="160">
                        <p style="line-height: 20px;margin-bottom: 10px;">{{item.stateMsg ? item.stateMsg : '暂无原因'}}</p>
                        <div style="text-align: right;">
                          <el-button type="primary" size="mini" @click="againSubmit(item)">重新提交</el-button>
                        </div>
                        <el-button slot="reference" type="text" class="button" v-if="item.state == 3">
                          审核失败
                          <i class="el-icon-question"></i>
                        </el-button>
                      </el-popover>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-card>

    </div>

	<add-or-update ref="addOrUpdate" v-if="addOrUpdateVisible"></add-or-update>
  </div>
</template>
<script>
  import {
    clearLoginInfo
  } from '@/utils';
import AddOrUpdate from './tstoreseller-add-or-update';
  export default {
   data() {
   	return {
   		role: '',
   		dataList: [],
   		addOrUpdateVisible: false,
   		storeForm: {
   			name: ''
   		}
   	};
   },

   components: {
   	AddOrUpdate
   },

   created() {
   	this.getDataList();
   },

   methods: {
   	/**
   	 * 进入总部（管理员权限）
   	 */
   	adminTotal() {
   	  this.$cookie.set("seller",this.role)
   		this.$router.replace({ name: 'home' });
   	},

   	/**
     * @param item
     */
   	adminSeller(item) {
   		this.$cookie.set('sellerInfo', JSON.stringify(item));
   		this.$cookie.set('seller', item.sellerId);
   		//保存当班信息
   		this.$http({
   			url: this.$http.adornUrl('/keepChangeWorkInfo'),
   			method: 'get',
   		}).then(({ data }) => {
   			if (data && data.code === 0) {
   				this.role = data.role;
   				this.dataList = data.list;
   			} else {
   				this.dataList = [];
   				this.totalPage = 0;
   			}
   		});
   		//获取抹零规则
      this.$http({
        url: this.$http.adornUrl('/store/tstorewipezerorule/info'),
        method: 'get',
        params: this.$http.adornParams({}),
      }).then(res => {
        this.$cookie.set("zeroStatus", res.data.tStoreWipeZeroRule.zeroStatus)
        this.$cookie.set("rule", res.data.tStoreWipeZeroRule.rule)
      });
   		this.$router.replace({ name: 'home' });
   	},

   	getDataList() {
   		this.$http({
   			url: this.$http.adornUrl('/store/tstoreseller/listByUserId'),
   			method: 'get',
   			params: this.$http.adornParams({
   				page: 1,
   				limit: 100
   			})
   		}).then(({ data }) => {
   			if (data && data.code === 0) {
          this.$cookie.set("roleId",data.role)
   				this.role = data.role;
   				this.dataList = data.list;
   			} else {
   				this.dataList = [];
   				this.totalPage = 0;
   			}
   		});
   	},
   	/**
   	 *
   	 */
   	// 新增 / 修改
   	addStore() {
   		this.addOrUpdateVisible = true;
   		this.$nextTick(() => {
   			this.$refs.addOrUpdate.init(0);
   			this.getDataList();
   		});
   	},
   	/**
   	 * 注销
   	 */
   	logout() {
   		this.$confirm(`确定进行[注销]操作?`, '提示', {
   			confirmButtonText: '确定',
   			cancelButtonText: '取消',
   			type: 'warning'
   		})
   			.then(() => {
   				this.$http({
   					url: this.$http.adornUrl('/sys/logout'),
   					method: 'post',
   					data: this.$http.adornData()
   				}).then(({ data }) => {
   					if (data && data.code === 0) {
   						clearLoginInfo();
   						this.$cookie.delete('sellerInfo');
              this.$cookie.delete('seller');
   						this.$router.push({ name: 'login' });
   					}
   				});
   			})
   			.catch(() => {});
   	}
   },

   mounted() {
   	//防止页面后退
   	history.pushState(null, null, document.URL);
   	window.addEventListener('popstate', function() {
   		history.pushState(null, null, document.URL);
   	});
   }
  };
</script>

<style lang="scss" scoped>
	.container {
	        margin: 0 auto;
	        width: 100%;
	        padding: 0 130px;
	    }
	    .header {
	        width: 100%;
	        height: 60px;
	        line-height: 70px;
	        background-color: white;
	        //background: linear-gradient(to right, #0154af 0%, #049ad7 100%)
	    }
	    .flex-container {
	        height: 100%;
	        display: flex;
	        align-items: center;
	        justify-content: space-between;

	        .flex-item {
	            display: flex;
	            align-items: center;
	            justify-content: center;
	            color: #FFFFFF;
	            font-size: 32px;
	            &.logo {
	                // width: 60px;
	                // height: 60px;
	            }
	            img {
	                display: block;
	                max-width: 100%
	            }
	        }
	    }
	    .nav {
	  list-style: none;
	  padding: 0;
	  margin: 0;
	  display: flex;
	  font-size: 14px;

	  li {
	    cursor: pointer;
	    min-width: 50px;
	    padding: 0 20px;
	    border-right: 1px solid rgba(255, 255, 255, 0.2);
	    &:first-child {
	      border-left: 1px solid rgba(255, 255, 255, 0.2);
	    }
	  }
	}
	.newLogo-right {
	    font-size: 16px;
	    height: 30px;
	    line-height: 30px;
	    width: 156px;
	    display: inline-block;
	    border-left: 1px solid #ccc;
	    color: #888;
	    padding-left: 12px;
	    margin-left: -8px;
	    vertical-align: middle;
	}

	ul li {
	  list-style-type: none;
	}

	.container2 {
	  width: 1200px;
	  margin: 0 auto;
	}

	#granted-hotels {
	  margin-bottom: 1em;
	}

	#granted-hotels li {
	  float: left;
	  margin-left: 1em;
	  margin-top: 20px;
	}

	#granted-hotels li a {
	  background-color: #599bb3;
	  border-radius: 15px;
	  display: inline-block;
	  cursor: pointer;
	  color: #ffffff;
	  font-size: 18px;
	  font-weight: bold;
	  padding: 32px 32px;
	  text-decoration: none;
	  text-shadow: 0px 1px 0px #3d768a;
	}

	.choosetheformat .time {
	  font-size: 13px;
	  width: 70%;
	  line-height: 25px;
	  color: #999;
	}

	.choosetheformat .bottom {
	  margin-top: 13px;
	  line-height: 12px;
	}

	.choosetheformat .button {
	  padding: 0;
	  float: right;
	}

	.choosetheformat .image {
	  width: 100%;
	  display: block;
	}

	.choosetheformat .clearfix:before,
	.choosetheformat .clearfix:after {
	  display: table;
	  content: "";
	}

	.choosetheformat .clearfix:after {
	  clear: both
	}

	.choosetheformat .el-tabs__header.is-top {
	  margin-bottom: 0;
	}

	.choosetheformat .el-card.box-card {
	  border-top: none;
	}

	.choosetheformat .demo-form-inline .el-form-item {
	  margin-bottom: 0px;
	}
</style>
